<!-- 年规 - 营销规划 - 新增/编辑 -->
<template>
  <view>
    <view class="px-3.75 pb-25">
      <view class="flex justify-between items-center text-28 c-#999">
        <view>币种：{{ currencyName }}</view>
        <view @click="onChargeUserClick">
          <text>负责人：</text>
          <text class="c-primary">{{ formData.chargeUser?.nickname || '待添加' }}</text>
        </view>
      </view>
      <view v-for="(item, index) in formData.list" :key="index">
        <view class="py-3 text-40 c-#333 font-600">{{ item.label }}：</view>
        <view v-for="(formItem, formIndex) in item.list" :key="formIndex" class="card-grey">
          <view class="flex-shrink-0 w-346 c-#333">{{ formItem.label }}</view>
          <u-input v-model="formItem.value" class="flex-1" placeholder="请输入" :type="formItem.type"
            :customStyle="{ fontSize: '28rpx' }" />
        </view>
      </view>
    </view>
    <view class="bottom-wrap-16 px-3.75 bg-white" @click="onSubmit">
      <view class="btn-primary">保存</view>
    </view>
  </view>
</template>
<script setup>
import { showToast, navigate } from '@/common/util/uni';
import { numFormat } from '@/common/util/format'
import { postMarketPlanAdd } from '@/common/http/module/plan.js'
import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const emit = defineEmits(['confirm'])
const props = defineProps({
  data: Object
})

const formData = reactive({
  chargeUser: '',
  list: [
    {
      label: '市场拓展投入（万）',
      list: [
        { label: '参展投入', value: '', prop: 'exhibition_input', type: 'digit' },
        { label: '拜访投入', value: '', prop: 'visiting_input', type: 'digit' },
      ]
    },
    {
      label: '阿里国际站投入（万）',
      list: [
        { label: '金品', value: '', prop: 'gold_objects', type: 'digit' },
        { label: '出口通', value: '', prop: 'outlet_port', type: 'digit' },
        { label: '行业领袖PRO', value: '', prop: 'industry_leader', type: 'digit' },
        { label: 'P4P投入(年)', value: '', prop: 'p4p_input', type: 'digit' },
        { label: '顶展年投入', value: '', prop: 'top_exhibition_input', type: 'digit' },
        { label: '问鼎年投入', value: '', prop: 'tripod_input', type: 'digit' },
      ]
    },
    {
      label: '其他投入（万）',
      list: [
        { label: '官网投入(万)', value: '', prop: 'website_input', type: 'digit' },
        { label: '营销工具投入(万)', value: '', prop: 'marketing_tool_input', type: 'digit' },
        { label: '客户管理工具投入(万)', value: '', prop: 'customer_tool_input', type: 'digit' },
        { label: '自建站投入(万)', value: '', prop: 'self_station_input', type: 'digit' },
        { label: '社交平台投入(万)', value: '', prop: 'social_platform_input', type: 'digit' },
        { label: '询盘目标数(线上+线下)', value: '', prop: 'enquiries_number', type: 'number' },
        { label: '询盘转化率', value: '', prop: 'enquiries_rate', type: 'digit' },
      ]
    }
  ]
})

const currencyName = computed(() => planStore.currency?.label || '未添加')

watch(() => props.data, (val) => initFormData(val))

function initFormData(data) {
  if (!data) return

  console.log('initFormData', data);
  formData.chargeUser = data.market_planning
  formData.list.forEach(item => {
    item.list.forEach(child => {
      child.value = data[child.prop] > 0 ? numFormat(data[child.prop]): ''
    })
  })
}

function onChargeUserClick() {
  const ids = formData.chargeUser?.user_id
  navigate(`/package_plan/pages/user/select?ids=${ids}&singleSelect=true`)
}


function onUserSelect(val) {
  formData.chargeUser = {
    user_id: val.user_id,
    nickname: val.user?.nickname
  }
}

function onSubmit() {
  const params = {
    club_id: userStore.currentSocietyId,
    year: planStore.year,
    market_planning_charge: formData.chargeUser?.user_id || formData.chargeUser?.id
  }
  formData.list.forEach(item => {
    item.list.forEach(child => {
      params[child.prop] = child.value
    })
  })
  console.log('onSubmit', params);
  postMarketPlanAdd(params).then(() => {
    showToast('保存成功')
    emit('confirm')
  })
}

onMounted(() => initFormData(props.data))

defineExpose({ onUserSelect })
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.card-grey {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  border-radius: 12rpx;
  background-color: #F6F6F6;
  font-size: 28rpx;
}
</style>